<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>单节课体验</title>
		
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index-all.css"/>
		<!-- <script src="js/yjytab.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/tab.css"/>
	</head>
	<body>
		<div class="con">
			<header class="danjietiyan-header">
				<img src="img/top.png" class="zhuangtailan">
				<p><a href="index-rec.html" class="iconfont icon-left"></a href=""> <span>单节课体验</span> </p>
				
			</header>
			<main id="danjiety-main">
				<nav class="danjietiyan-nav">
					<ul>
						<li>
							<a href="index-all.html" >全部</a>
						</li>
						<li>
							<a href="" class="danjiety-main-active">推荐</a>
						</li>
						<li>
							<a href="">VIP专区</a>
						</li>
						<li>
							<a href="">水彩</a>
						</li>
						<li>
							<a href="">素描</a>
						</li>
						<li>
							<a href="">彩铅</a>
						</li>
					</ul>
				</nav>
				<div>
				<em class="h-bottom-all"></em>
					<em class="h-bottom-rec"></em>	
				</div>
				<div class="tabs">
					
						<a href="javascript:;" class="active">综合</a>
						<a href="javascript:;">热门</a>
						<a href="javascript:;">新增</a>
					
				</div>
				<div id="tabs-container" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
				<div class="main-con">
					<a href="detail.html">
					<div class="main-lesson" >
						<div class="main-lesson-wrap"><img src="img/index1.png" ></div>
						<div class="main-lesson-text">
							<p>超写实并不难0基础快速上手掌握</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
						
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p1.png" ></div>
						<div class="main-lesson-text">
							<p>黄有维《不一样的水彩课》</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p2.png" ></div>
						<div class="main-lesson-text">
							<p>李森/从零基础到摄影达人</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p3.png" ></div>
						<div class="main-lesson-text">
							<p>庐苓/水彩手绘立秋节气美食</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p4.png" ></div>
						<div class="main-lesson-text">
							<p>沈晔/唯美水彩人物创作-奇幻风格</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					
					<div class="main-lesson">
						
						<div class="main-lesson-wrap"><img src="img/p5.png" ></div>
						<div class="main-lesson-text">
							<p>国画人物入门系统课</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>	
						
						
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p2.png" ></div>
						<div class="main-lesson-text">
							<p>李森/从零基础到摄影达人</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
				</div>
				</div>
				<div class="swiper-slide">
				<div class="main-con">
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p2.png" ></div>
						<div class="main-lesson-text">
							<p>李森/从零基础到摄影达人</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					
					<div class="main-lesson">
						
						<div class="main-lesson-wrap"><img src="img/p5.png" ></div>
						<div class="main-lesson-text">
							<p>国画人物入门系统课</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>	
						
						
					
					</div>
					</a>
				</div>
				</div>
				<div class="swiper-slide">
				<div class="main-con">
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p3.png" ></div>
						<div class="main-lesson-text">
							<p>庐苓/水彩手绘立秋节气美食</p>
							<p><em>素描</em>
							<em>静物</em>
							<em>花卉</em></p>
													
							<p><span>导师 : 秦潇</span>
							<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
					<a href="">
					<div class="main-lesson">
						<div class="main-lesson-wrap"><img src="img/p4.png" ></div>
						<div class="main-lesson-text">
							<p>沈晔/唯美水彩人物创作-奇幻风格</p>
						<p><em>素描</em>
						<em>静物</em>
						<em>花卉</em></p>
												
						<p><span>导师 : 秦潇</span>
						<b>35人以购</b></p>
						</div>
					
					</div>
					</a>
				</div>
				</div>
			</div>
		</div>		
			</main>
			
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				})
			}
		</script>
	</body>
</html>
